import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
} from 'react-native';

import CommonListPage from '../common/CommonListPage';
import BaseItem from '../common/BaseItem';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import CommonStyles from '../../common/CommonStyles';
import UserNoticeConstants from '../../common/UserNoticeConstants';
import PostConstants from '../../common/PostConstants';
import Constants from '../../common/Constants';
import TImage from '../../components/TImage';
import DataManager from '../../datas/DataManager';
import NoticeMsgSystemNumAction from '../../actions/notice/NoticeMsgSystemNumAction';
import NoticeMsgCommentsAction from '../../actions/notice/NoticeMsgCommentsAction';
import NoticeRequestUnreadedNumAction from "../../actions/notice/NoticeRequestUnreadedNumAction";
import {DateUtils} from '../../utils/Utils';

const MAX_SHOW_NUM = 99;

const SORT_ARR=[
  {key:'1',name:'系统消息'},
  {key:'0',name:'评论回复'},
  {key:'2',name:'活动消息'},
  {key:'3',name:'运动消息'},
];

export default class UserNoticePage extends CommonListPage {
  constructor(props) {
    super(props);
    this.select_index=this.props.pageData.routeData.type==='news'?1:0; 
  }

  _dealEnterPage() {
    // super._dealEnterPage();
    this.select_index=this.props.pageData.routeData.type==='news'?1:0;
    this.leave();
    this.doRefresh();
  }
  _initTimer() {
    // if(this._timer === null) {
    //   this._timer = setInterval(()=>{
    //    this.doRefresh();
    //  }, 2000);
    // }
  }

  _dealLeavePage() {
    super._dealLeavePage();
    // this.select_index=this.props.pageData.routeData.type==='news'?1:0; 
  }
  _getViewStyle() {
      return {paddingTop:Config.paddingTop,
        backgroundColor:"#ffffff"}
  }
  _getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:SizeUtils.translateDesignHeightToCode(0),
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(80)),
        backgroundColor:"#fff"};
  }
  _renderTopView(){
    if(this.props.pageData.routeData.type==='news'){return;}
      return(
          <View>
            <View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
            </View>
          </View>
      )
  }
   _getUnreadNumView(number){
      if (!this.state.datanum) {return}
      var num =0;
      if (number===0) {
        num = this.state.datanum.unread_system;
      }
      if (number===1) {
        num = this.state.datanum.unread_comment;
      }
      if (number===2) {
        num = this.state.datanum.unread_activity;
      }
      if (number===3) {
        num = this.state.datanum.unread_step;
      }
      if (num===0) {return null}
      return(
        <View style={{position:'absolute',right:6,top:6,
          alignItems: 'center',justifyContent: 'center',
          backgroundColor:'#ee3535',width:8,height:8,borderRadius:4}}>
        </View>)
   }
   _getSortButton(typeData,index) {
    return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.select_index!==index) {
            this.setState({
              t:'d' 
            });
            this.select_index=index;
            this.leave();
            this.doRefresh();
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
          {this._getUnreadNumView(index)}
      </TouchableOpacity>
    )
  }
  _renderOneImageBottom(data) {
    if (!data.img_url) {
      return null;
    }
    if (data.img_url.length<1) {
      return null;
    }
    return (
      <View style={{marginBottom:SizeUtils.translateDesignHeightToCode(20),}}>
        <Image source={{uri:data.img_url}} style={{width:SizeUtils.getWindowSize().width- SizeUtils.translateDesignWidthToCode(40),
          height:SizeUtils.getWindowSize().width*0.5}}
          resizeMode={"cover"} />
      </View>
    )
  }
  _requestData(page, listView) {
    //这个不用listview
    const selectKey = SORT_ARR[this.select_index].key;
    if (selectKey==='0') {
      new NoticeMsgCommentsAction().call(listView, {page:page})
    }else{
      new NoticeMsgSystemNumAction().call(listView, {page:page, type:selectKey})
    }
    new NoticeRequestUnreadedNumAction().call(this,{});
  }

  _onRenderItem(data, index) {
    if (data.type===undefined) {
      return null;
    }
    if (this.props.pageData.routeData.type==='news') {
      if (data.type!==1) {return null}
    }
    if (data.type===5) {
      return (
        <View>
          <View style={{height:SizeUtils.translateDesignHeightToCode(50),
            justifyContent: 'center',
            backgroundColor:'#f2f2f2'}}>
            <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>{DateUtils.formatDiffFromServerTime(data.sent_at)}</Text>
          </View>
          <View style={{backgroundColor:'#fff',padding:SizeUtils.translateDesignHeightToCode(20)}}>
            <View style={{flexDirection:'row',paddingLeft:0,}}>
              <TImage
                source={require("../../../resource/images/home/biaotitle.png")}
                style={{ marginTop:SizeUtils.translateDesignWidthToCode(4),width: 8, height: 30 }}
              />
              <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(10),
                lineHeight:SizeUtils.translateDesignHeightToCode(35),
                marginBottom:SizeUtils.translateDesignHeightToCode(20),
                fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                <Text style={{color:'#ff6600'}}>[目标]</Text>
                {data.content}
              </Text>
            </View>
            <Text numberOfLines={1} style={{color:'#888888'}}>{'挑战自己再接再历'}</Text>
          </View>
        </View>
      )
    }
    const selectKey = SORT_ARR[this.select_index].key;
    return (
      <View>
        <View style={{height:SizeUtils.translateDesignHeightToCode(50),
            justifyContent: 'center',
            backgroundColor:'#f2f2f2'}}>
            <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>{DateUtils.formatDiffFromServerTime(data.sent_at)}</Text>
        </View>
        <View style={{backgroundColor:'#fff',padding:SizeUtils.translateDesignHeightToCode(20)}}>
            <View style={{flexDirection:'row',paddingLeft:0,}}>
              <TImage
                source={require("../../../resource/images/home/biaotitle.png")}
                style={{ marginTop:SizeUtils.translateDesignWidthToCode(4),width: 8, height: 30 }}
              />
              <Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(10),
                lineHeight:SizeUtils.translateDesignHeightToCode(35),
                marginBottom:SizeUtils.translateDesignHeightToCode(20),
                fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                {data.type!==3&&data.type!==2?<Text style={{color:'#ff6600'}}>{this._getComonentTitle(data.type)}</Text>:null}
                {selectKey==="0"?<Text style={{color:'#48a3f7'}}>{' @'+data.sender_name}</Text>:null}
                {this._getCTitle(data)}
              </Text>
            </View>
            {this._renderOneImageBottom(data)}
            <Text numberOfLines={1} style={{color:'#888888'}}>
            {data.content}</Text>
        </View>
      </View>
    )
  }
  _getCTitle(data){
    const selectKey = SORT_ARR[this.select_index].key;
    if (selectKey==="0") {
      return ' 回复了您';
    }
    return data.title||data.content;
  }
  _getComonentTitle(type){
    const selectKey = SORT_ARR[this.select_index].key;
    if (selectKey==="0"&&type===1) {
      return '[新闻]'
    }else if (selectKey==="0"&&type===2) {
      return '[金点子]'
    }else if (selectKey==="0"&&type===3) {
      return '[圈子]'
    }else if (type===1) {
      return '[爱情事]'
    }else if (type===4) {
      return '[活动]'
    }else if (type===5) {
      return '[目标]'
    }else if (type===6) {
      return '[新闻]'
    }
  }
  _onPressItem(data) {
    const selectKey = SORT_ARR[this.select_index].key;
    if (selectKey==="0"&&data.type===1) {
      this.gotoPage(Config.pages.news_content, {...data,news_id:data.relevance_id});
    }
  }
}
